<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>乐淘商城</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 引入字体图标库的css -->
    <link rel="stylesheet" href="./lib/fa/css/font-awesome.min.css">
    <link rel="stylesheet" href="./lib/mui/css/mui.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>


<!-- 全屏容器 -->
<div class="lt_container">

    <!-- 乐淘头部 -->
    <div class="lt_header">
        <a href="javascript:history.go(-1);" class="icon_left"><i class="mui-icon mui-icon-back"></i></a>
        <h3>购物车</h3>
    </div>

    <!-- 乐淘主体 -->
    <div class="lt_main">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">

                <!--模板在里面-->
                <ul class="mui-table-view cart-list">

                    <!--模板部分-->
                    <!--<li class="mui-table-view-cell cart_item">-->
                        <!--<div class="mui-slider-right mui-disabled">-->
                            <!--<a class="mui-btn mui-btn-primary mui-icon mui-icon-compose btn_edit"></a>-->
                            <!--<a class="mui-btn mui-btn-danger mui-icon mui-icon-trash btn_delete"></a>-->
                        <!--</div>-->
                        <!--<div class="mui-slider-handle">-->
                            <!--<div class="mui-table-cell">-->

                                <!--&lt;!&ndash; 左侧图片 &ndash;&gt;-->
                                <!--<div class="cart_img">-->
                                    <!--<img src="./images/product.jpg" alt="">-->
                                    <!--<input type="checkbox" class="ck">-->
                                <!--</div>-->

                                <!--&lt;!&ndash; 右侧商品详情 &ndash;&gt;-->
                                <!--<div class="cart_info">-->
                                    <!--<p class="pro_name mui-ellipsis-2">-->
                                        <!--匡威三星标1970s converse复刻 142334c 144757c三星标黑色高帮-->
                                    <!--</p>-->
                                    <!--<p>-->
                                        <!--<span class="price">¥998</span>-->
                                        <!--<span class="oldPrice">¥1998</span>-->
                                        <!--<span class="mui-pull-right">20双</span>-->
                                    <!--</p>-->
                                    <!--<p>-->
                                        <!--鞋码: 40-->
                                    <!--</p>-->
                                <!--</div>-->

                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->


                </ul>

            </div>
        </div>
    </div>


    <!-- 乐淘底部 -->
    <div class="lt_footer">
        <ul>
            <li>
                <a href="index.html">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="category.html">
                    <i class="fa fa-align-justify"></i>
                    <span>分类</span>
                </a>
            </li>
            <li class="current">
                <a href="cart.html" class="logout-1">
                    <i class="fa fa-cart-plus"></i>
                    <span>购物车</span>
                </a>
            </li>
            <li>
                <a href="user.html" class="logout-2">
                    <i class="fa fa-user"></i>
                    <span>用户中心</span>
                </a>
            </li>
        </ul>
    </div>
</div>


<!--创建模板-->
<script type="text/html" id="tmp">
    {{ each list v i }}
    <li class="mui-table-view-cell cart_item">
        <div class="mui-slider-right mui-disabled">
            <a class="mui-btn mui-btn-primary mui-icon mui-icon-compose btn_edit"></a>
            <a class="mui-btn mui-btn-danger mui-icon mui-icon-trash btn_delete"></a>
        </div>
        <div class="mui-slider-handle">
            <div class="mui-table-cell">

                <!-- 左侧图片 -->
                <div class="cart_img">
                    <img src="./images/product.jpg" alt="">
                    <input type="checkbox" class="ck">
                </div>

                <!-- 右侧商品详情 -->
                <div class="cart_info">
                    <p class="pro_name mui-ellipsis-2">{{ v.proName }}</p>
                    <p>
                        <span class="price">¥{{ v.price }}</span>
                        <span class="oldPrice">¥{{ v.oldPrice }}</span>
                        <span class="mui-pull-right">{{ v.num  }}双</span>
                    </p>
                    <p>鞋码: {{ v.size }}</p>
                </div>

            </div>
        </div>
    </li>
    {{ /each }}

</script>

<script src="./lib/zepto/zepto.min.js"></script>
<script src="./lib/mui/js/mui.js"></script>
<script src="./lib/artTemplate/template-web.js"></script>
<script src="./js/common.js"></script>
<script src="./js/cart.js"></script>
</body>

</html>